
function Enlarge(ele){
    this.ele = document.querySelector(ele)
    //展示盒子
    this.show = this.ele.querySelector('.show')
    //找到遮盖层盒子
    this.mask = this.ele.querySelector('.mask')
    //放大镜盒子
    this.enlarge = this.ele.querySelector('.enlarge')
    //列表盒子
    this.list = this.ele.querySelector('.list')
}
//1.移入移出
Enlarge.prototype.overOut = function (){
    // console.log(888);
    //移入show显示 移除show隐藏
    this.show.addEventListener('mouseover',() =>{
        this.mask.classList.add('active')
        this.enlarge.classList.add('active')
    })
    this.show.addEventListener('mouseout',()=>{
        this.mask.classList.remove('active')
        this.enlarge.classList.remove('active')
    })
}
// 2-0 获取尺寸提取出来
Enlarge.prototype.getProp = function() {
      //2-1 获取遮罩层尺寸
      this.mask_width = parseInt(window.getComputedStyle(this.mask).width)
      this.mask_height = parseInt(window.getComputedStyle(this.mask).height)
      //2-2 show 盒子尺寸
      this.show_width = this.show.offsetWidth
      this.show_height = this.show.offsetHeight
      //2-3 背景图尺寸
      const bg = window.getComputedStyle(this.enlarge).backgroundSize.split(' ')
      this.ba_width =parseInt ( bg[0] )
      this.ba_height =parseInt ( bg[1] )
  
}
//2.调整比例
Enlarge.prototype.sctScale = function () {
        //2-4 计算   放大镜盒子 =遮罩层尺寸/show 盒子尺寸* 背景图尺寸
        this.enlarge_width = this.mask_width / this.show_width * this.ba_width
        this.enlarge_height = this.mask_height / this.show_height * this.ba_height
        //2-5 设置
        this.enlarge.style.width = this.enlarge_width+'px'
        this.enlarge.style.height = this.enlarge_height+'px'
}

//3.动起来
Enlarge.prototype.move = function () {
    //3.1 给shoe盒子绑定一个移动事件
    this.show.addEventListener('mousemove',e=>{
        //处理事件对象
        e = e || window.event
        //3.1 获取尺寸

        //3.2 拿坐标
        let x = e.offsetX-100
        let y = e.offsetY-100

        //3.3 边界值判断 
        if (x<=0) x=0
        if (y<=0) y=0
        if(x >= this.show_width - this.mask_width) x=this.show_width-this.mask_width
        if(y >= this.show_height - this.mask_height) y=this.show_height-this.mask_height
        //3.4 给扎罩层赋值
        this.mask.style.left = x+'px'
        this.mask.style.top = y+'px'

        //3.5 右边一起动
        //  enlarge盒子移动距离(-背景移动距离) =遮罩层尺寸/遮罩层移动距离 *  放大镜enlarge盒子尺寸
        const moveX = this.enlarge_width * x / this.mask_width
        const moveY = this.enlarge_height * y / this.mask_height

        //3-6 给背景图赋值
        this.enlarge.style.backgroundPosition = `-${ moveX }px -${ moveY }px`


    })
}
//4.绑定事件
Enlarge.prototype.bindEvent = function() {
    //4-1 this.list 绑定点击事件
    this.list.addEventListener('click',e=>{
        //处理事件兼容
        e = e || window.event
        //处理事件目标兼容
        const target = e.target || e.srcElement

        if(target.nodeName ==='IMG'){

            //4-2 切换边框显示
            for(let i=0;i<this.list.children.length;i++){
                this.list.children[i].classList.remove('active')
            }
            //当前点击的是img 得让父元素有active
            target.parentElement.classList.add('active')
            //4-3换图片
            const showImg = target.dataset.show
            const enlargeImg = target.dataset.big
            //赋值对应的值
            this.show.firstElementChild.src = showImg
            this.enlarge.style.backgroundImage = `url(${enlargeImg})`

        }
    })
}